<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :show-message="false" label-width="150px">
      <el-card :body-style="{ paddingBottom: '0' }">
        <div slot="header">
          <div class="fw-6 colorY">中医九种体质题库</div>
        </div>
        <QuestionBank
          :defaultValue="form.questionnaire"
          @change="updateQuestionnaire"
          showRequired
          showConflict
        />
      </el-card>
      <el-card class="mt-15" :body-style="{ paddingBottom: '0' }">
        <div slot="header">
          <div class="fw-6 colorY">问答选项-体质得分设置表</div>
        </div>
        <el-table :data="form.questionnaire" border>
          <el-table-column label="答案序号" width="200" align="center">
            <template slot-scope="{ row, $index }">
              <div
                v-for="(select, selectIdx) in row.answers"
                :key="selectIdx"
                style="height: 44px; line-height: 44px"
                class="ov-1"
                :class="{ borderB: selectIdx + 1 !== row.answers.length }"
              >
                {{ $index + 1 }}.{{ selectIdx + 1 }} {{ select.answer }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            v-for="(tcm, tcmIdx) in tcmList"
            :key="tcm.id"
            width="120"
            align="center"
          >
            <template slot="header" slot-scope="scope">
              <div>
                {{ tcm.constitutionaName }}
              </div>
            </template>
            <template slot-scope="{ row }">
              <div
                v-for="(select, selectIdx) in row.answers"
                :key="selectIdx"
                style="height: 44px"
                class="disFlxAC"
                :class="{ borderB: selectIdx + 1 !== row.answers.length }"
              >
                <el-input
                  v-if="select.points && select.points[tcmIdx]"
                  size="small"
                  v-model="select.points[tcmIdx].point"
                ></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-form>
    <div class="tc py-20">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onSubmit">保存分值设置表</el-button>
    </div>
  </div>
</template>

<script>
import QuestionBank from "@/components/QuestionBank";
import {
  getConstitutionList,
  getConstitutionQuestionnaire,
  updateConstitutionQuestionnaire,
} from "@/api/saas/tcm";

export default {
  name: "CorporeityScore",
  components: {
    QuestionBank,
  },
  data() {
    return {
      form: {},
      tcmList: [], // 体质列表
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    async getList() {
      const { rows } = await getConstitutionList({ pageSize: 99 });
      this.tcmList = rows;
      const { data } = await getConstitutionQuestionnaire();
      this.form = { id: data.id, questionnaire: data.questionnaire };
      if(!data.questionnaire.length){
        this.form.questionnaire = [
          {
            question: "", // 问题
            type: 1, // 1单选2多选
            answers: [
              {
                answer: "", // 答案
                required: 0, // 必选1 非必选0
                conflict: 0, // 互斥1 否则0
              }
            ],
          }
        ]
      }
      this.updateQuestionnaire()
    },
    // 操作题目,选项,证型, 动态改变证型数据
    updateQuestionnaire() {
      this.form.questionnaire.forEach((problem, problemIdx) => {
        problem.answers.forEach((select, selectIdx) => {
          this.$set(select, "option", `${problemIdx + 1}.${selectIdx + 1}`);
          this.$set(
            select,
            "points",
            this.tcmList.map((tcm, tcmIdx) => {
              return {
                symptomModelId: tcm.id,
                point:
                  select.points && select.points[tcmIdx]
                    ? select.points[tcmIdx].point
                    : 0,
              };
            })
          );
        });
      });
      console.log(JSON.parse(JSON.stringify(this.form.questionnaire)));
    },
    onSubmit() {
      const that = this;

      that.$refs["form"].validate(async (valid) => {
        if (valid) {
          for (let problemIdx = 0; problemIdx < that.form.questionnaire.length; problemIdx++) {
            const problem = that.form.questionnaire[problemIdx];
            if(!problem.question || (problem.answers.findIndex(v=> v.answer === "") !== -1)){
              that.$message.error('问题和选项值不能为空!')
              return
            }
          }
          await updateConstitutionQuestionnaire(that.form)
          that.$message.success(that.form.id ? "修改成功" : "新增成功");
          that.$router.go(-1);
        }
      });
    },
    onCancel() {
      this.$router.go(-1);
    }
  },
};
</script>

<style lang="scss" scoped></style>
